<template>
  <view>
    <view class="wuliu">
      <view class="box2">
        <view class="flow flex-y-center">
          <view class="line"></view>
          <view class="gengduo" @click="wuliuxingaqin" v-if="isdetailed">
             详细信息
            <view class="arrow">
              <u-icon name="arrow-right" color="#ffaa00" size="25rpx"></u-icon>
            </view>
          </view>
          <view>
            <view class="item flex-y-center" v-for="(item,index) in flow" :key="index">
              <view class="dot flex-grow-0"></view>
              <view class="flex-grow-1">
                <view class="zuhe">
                  <view class="name">
                    {{item.name}}
                  </view>
                  <view class="time"> {{item.time}}</view>
                </view>
                <view class="title">{{item.title}}</view>
                 <view class="title">{{item.titless}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="order" >
      <view class="top">
        <view class="left">
          <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
          <view class="store"> 灯具专卖商城</view>
          <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
        </view>
      </view>
      <view class="item" @click="zaicaigoumai(orderxinxi.data.goodsid)">
        <view class="left">
          <image :src="orderxinxi.data.image_url" mode="aspectFill"></image>
        </view>
        <view class="content">
          <view class="title u-line-2">{{orderxinxi.data.name}}</view>
          <view class="type"> 规格：默认</view>
          <view class="butt">
            <view class="agiermai">
              再次购买
            </view>
            <view class="agiermai">
              退换
            </view>
          </view>
        </view>
        <view class="right">
          <view class="price">
            ￥{{orderxinxi.data.unit_price}}
          </view>
          <view class="number">x{{orderxinxi.data.quantity}}</view>
        </view>
      </view>
   <view class="bottom">
    <view class="tongyong">
      <view class="title">
        实付款
      </view>
      <view class="price">
        ￥{{orderxinxi.data.total_price}}
      </view>
    </view>
    <view class="tongyong">
      <view class="title">
        订单编号
      </view>
      <view class="orderbh">
        {{orderxinxi.data.order_number}}
      </view>
    </view>
    <view class="tongyong">
      <view class="title">
        创建时间
      </view>
      <view class="orderbh">
      {{Formattime(orderxinxi.data.created_time)}}
      </view>
    </view>
   </view>
    
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
import {Formattime} from "/src/utile/setime.js"
  import {
    orderUserStore
  } from "../../store/order.js"
  const orderStore = orderUserStore()
  const {
    orderxinxi
  } = orderStore
  onLoad((option) => {
    if (option.status==="待收货" || option.status==="待评价") {
         isdetailed.value = true
    }else{
      flow.value[0] = {  name: option.status}
    }
     orderStore.getorderxinxi(option.id)
  })
  //定义是否显示详细信息
  const isdetailed = ref(false)
  const flow = ref([{
      time: '04-23 19:38',
      name: "已签收",
      title: '邮件投递到:传智学院干洗店代收点自提点,投递员:窦飞,电话:19816080568 风雨兼程送快递,只盼小主能满意。请点击“服务评价”反馈您的感受,助力EMS不断提升服务水平”',
    },
    {

      name: "送至北京南路6号传智专修学院新校区干洗店",
      title:'李雨 86-187****3989 号码保护中',
      titless:'取件可出乐虚拟号 17605260416-9404'
    }
  ])
  //跳转商品详情
  function zaicaigoumai(goodid) {
     uni.navigateTo({
       url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
     })
  }
  //跳转物流详情
  function wuliuxingaqin(){
    uni.navigateTo({
      url: `/subPack/Logisticsdetails/Logisticsdetails`
    })
  }

</script>

<style lang="scss">
  .wuliu {
    .box2 {
      position: relative;
      .gengduo{
        position: absolute;
        right: 20rpx;
        top: 40rpx;
        display: flex;
        color: #ffaa00;
        
      }
      background: #fff;
      margin: 0 20rpx;
      border-radius: 10rpx;
      .flow {
        position: relative;
        overflow: hidden;
        margin: 20rpx 30rpx;
        .line {
          height: 36%;
          width: 1px;
          background: #eff0f2;
          position: absolute;
          left: 9rpx;
          z-index: 0;
          margin-top: 100rpx;
        }

        .item {
          margin: 25rpx 0;
          .dot {
            width: 20rpx;
            height: 20rpx;
            background: #eff0f2;
            border-radius: 50%;
            position: relative;
            margin-right: 32rpx;
            top: 40rpx;
          }

          .flex-grow-1 {
            margin-left: 40rpx;
            color: #a5a5a5;
            .title {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .zuhe {
              display: flex;
              .name {
                font-size: 0.8rem;
                margin-top: 5rpx;
                font-weight: 700;
                padding-right: 5rpx;
              }
              .time {
                font-size: 0.75rem;
                margin-top: 5rpx;
              }
            }
          }
        }
        .item:nth-child(1) {
          color: #fc5100;
          .zuhe {
            color: #fc5100;
          }
          .dot {
            background: #fc5100;
          }
        }
        .item:nth-child(2) {
          .name {
            color: #333;
          }
        }
      }
    }
  }

 .order {
    width: 710rpx;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;

    .top {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .store {
          margin: 0 10rpx;
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .right {
        color: $u-type-warning-dark;
      }
    }

    .item {
      display: flex;
      margin: 20rpx 0 0;

      .left {
        margin-right: 20rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }

      .content {
        position: relative;
        // border: 1px solid red;
        .title {
          font-size: 28rpx;
          line-height: 50rpx;
          // border: 1px solid red;
        }
        .type {
          margin: 10rpx 0;
          font-size: 24rpx;
          color: $u-tips-color;
        }
        .butt{
          bottom: -20rpx;
          display: flex;
          position: absolute;
          right: 0;
          text-align: center;
          .agiermai{
            width: 150rpx;
            border: 1px solid #eff0f2;
            padding: 5rpx 0;
            color: #89898a;
            border-radius: 20rpx;
           margin: 10rpx;
          }
        }
      }
      .right {
        margin-left: 10rpx;
        padding-top: 20rpx;
        text-align: right;

        .decimal {
          font-size: 24rpx;
          margin-top: 4rpx;
        }

        .number {
          color: $u-tips-color;
          font-size: 24rpx;
        }
      }
    }



    .bottom {
      margin-top: 40rpx;
      padding: 0 10rpx;
     .tongyong{
       display: flex;
       height: 70rpx;
       line-height: 70rxp;
       justify-content: space-between;
       .price{
         color: #df6027;
         font-weight: 600;
         font-size: 35rpx
       }
       .orderbh{
         color: #a9a9aa;
       }
       
     }
     
    }
  }

  .centre {
    text-align: center;
    margin: 200rpx auto;
    font-size: 32rpx;

    image {
      width: 164rpx;
      height: 164rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .tips {
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
    }

    .btn {
      margin: 80rpx auto;
      width: 200rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      color: #ffffff;
      font-size: 26rpx;
      background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
    }
  }

</style>